<!--岩土描述新增/编辑-->
<template>
  <div class="app-container-add">
    <el-dialog
      v-dialogDrag
      :title="dialogTitle"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      class="dialogStyleSmall"
      :before-close="cancel"
    >
      <el-form
        ref="addForm"
        class="dialog-form"
        :model="formData"
        :rules="rules"
        label-width="80px"
      >
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="岩土描述" prop="content">
              <el-input v-model="formData.content" :rows="3" type="textarea" placeholder="请输入岩土描述内容" size="medium" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="" prop="orderNum">
              <label slot="label" v-html="`排&emsp;&emsp;序`" />
              <el-input-number
                v-model="formData.orderNum"
                size="medium"
                controls-position="right"
                style="width: 100%"
                :min="1"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <DialogFooter />
      </div>
    </el-dialog>
  </div>
</template>
<script>
// dialog-footer
import DialogFooter from '@/components/Common/Btns/DialogFooter/index'
import {
  addRocksoil,
  editRocksoil,
  detailRocksoil,
  getMaxNum
} from '@/api/superviseBaseInfo/rocksoil'
export default {
  name: 'Add',
  components: {
    DialogFooter
  },
  data() {
    return {
      /* 新增 start*/
      dialogTitle: '', // 弹层标题
      dialogVisible: false, // 弹层是否显示
      btnDisabled: false, // 确定按钮
      formData: { // 新增数据
        content: '', // 岩土描述
        orderNum: '', // 排序
        createName: '' // 创建人名称
      },
      rules: { // 表单校验
        content: [
          { required: true, message: '岩土描述内容不能为空', trigger: 'blur' }
        ],
        orderNum: [
          { required: true, message: '排序不能为空', trigger: 'blur' }
        ],
        createName: [
          { required: true, message: '创建人名称不能为空', trigger: 'blur' }
        ]
      }
      /* 新增 end*/
    }
  },
  methods: {
    /* 新增/编辑弹层 start*/
    // 新增/编辑
    handleAdd(title, id) {
      this.dialogVisible = true
      this.dialogTitle = title
      this.emptyAddForm()
      if (id) {
        this.handleDetail(id)
      } else {
        this.getMaxNum()
      }
    },
    // 详情
    async handleDetail(id) {
      const { data } = await detailRocksoil(id)
      this.formData = { ...data }
    },
    // 最大排序
    async getMaxNum() {
      const { data } = await getMaxNum()
      this.formData.orderNum = data
    },
    // 提交按钮
    submitForm() {
      this.$refs['addForm'].validate(async valid => {
        if (valid) {
          this.btnDisabled = true
          if (this.formData.id) {
            await editRocksoil(this.formData)
            this.msgSuccess('修改成功')
          } else {
            await addRocksoil(this.formData)
            this.msgSuccess('保存成功')
          }
          this.cancel()
          this.$parent.getList()
        }
      })
    },
    // 取消按钮
    cancel() {
      this.dialogVisible = false
      this.btnDisabled = false
    },
    // 表单重置
    emptyAddForm() {
      this.resetForm('addForm')
      this.formData.id = ''
    }
    /* 新增/编辑弹层 end*/
  }
}
</script>

